<template>

    <layoutContent>
        <template #left>
            <!-- treeLevel  默认展示到部门     设置3展示到岗位 -->
            <!-- defTreeValue 默认选中值-->
            <!-- parentTreeValue  展示到岗位需要设置父级默认选中值（departmentId）-->
            <treeNode :defTreeValue="4" :parentTreeValue="8" :treeLevel="2" @node-change="nodeChange"></treeNode>

        </template>
        <!-- <template #right>
            右边
        </template> -->
        <template #search>
            搜索区
        </template>
        <template #content>

            <div style="display: flex; flex-direction: column;height: 100%;">
                <div style="flex: auto;  min-width: 0; min-height: 0;  display: flex;  flex-direction: column;">
                    <basicTableSum v-bind="tableConfig" @editFormFun="editFormClick">

                        <template #handle="{ row }">
                            <el-button type="danger" link @click="delFun(row)">删除</el-button>

                        </template>
                    </basicTableSum>
                </div>
            </div>


        </template>
    </layoutContent>
</template>
<script setup lang="ts">
    import layoutContent from "@/components/LayoutComponents/index.vue";
    import treeNode from '@/views/personalManagement/a-components/oragnizationTree/index.vue';
    import { ref, reactive, toRefs, onMounted, } from 'vue';
    import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";


    const nodeChange = (data: any) => {
        console.log(data, "树节点值，，，，")
    }

    const addRows = () => {
        editStatusType.value = "add";
        let obj = {
            title_zh: {
                label: "",
                value: ""
            },
            title_ru: {
                label: "",
                value: ""
            },
            bieming: {
                label: "",
                value: ""
            },
            sort: {
                label: "",
                value: ""
            },
        };
        tableData.value.push(obj)
    }
    const delFun = (rows) => {
        editStatusType.value = "del";
        let index = rows.index - 1;
        tableData.value.splice(index, 1);
    }

    const editFormClick = (ows) => {
        console.log(ows)
    }

    const tableHeadData = reactive([]);
    const tableData = ref([]);
    const headConfig = reactive({});//头部配置是否可编辑 
    const editStatusType = ref("");
    const tableConfig = reactive({
        headData: tableHeadData,//表格头部数据
        tableData: tableData,//表格内容数据
        headConfig: headConfig,//可编辑列类型
        selection: false,//是否显示checkbox  
        dragDrop: true,//拖拽 
        number: true,//开启序号 
        editStatus: false,
        editStatusType: editStatusType
    })

    onMounted(() => {
        let tableHead = [{
            title: "属性值(中文)",
            field: 'title_zh'

        }, {
            title: "属性值(俄文)",
            field: 'title_ru'
        }, {
            title: "1C别名",
            field: 'bieming'
        },
        {
            title: "排序",
            field: 'sort'

        }]
        Object.assign(tableHeadData, tableHead);
        let headCon = {
            title_zh: "input",
            title_ru: "input",
            bieming: 'input',
            sort: 'input'
        }
        Object.assign(headConfig, headCon);

        let tableDataArr = [{
            title_zh: {
                label: "",
                value: ""
            },
            title_ru: {
                label: "",
                value: ""
            },
            bieming: {
                label: "",
                value: ""
            },
            sort: {
                label: "",
                value: ""
            },
        }];
        tableData.value = tableDataArr;
    })


</script>

<style lang="scss">
    @import "./index.scss";
</style>